<section [formGroup]="mqttConfigForm" fxLayout="column">
  <mat-form-field class="mat-block" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.topic-pattern</mat-label>
    <input required matInput formControlName="topicPattern">
    <mat-error *ngIf="mqttConfigForm.get('topicPattern').hasError('required')">
      {{ 'tb.rulenode.topic-pattern-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <div fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
    <mat-form-field fxFlex="60" class="mat-block">
      <mat-label translate>tb.rulenode.host</mat-label>
      <input required matInput formControlName="host">
      <mat-error *ngIf="mqttConfigForm.get('host').hasError('required')">
        {{ 'tb.rulenode.host-required' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex="40" class="mat-block">
      <mat-label translate>tb.rulenode.port</mat-label>
      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">
      <mat-error *ngIf="mqttConfigForm.get('port').hasError('required')">
        {{ 'tb.rulenode.port-required' | translate }}
      </mat-error>
      <mat-error *ngIf="mqttConfigForm.get('port').hasError('min')">
        {{ 'tb.rulenode.port-range' | translate }}
      </mat-error>
      <mat-error *ngIf="mqttConfigForm.get('port').hasError('max')">
        {{ 'tb.rulenode.port-range' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex="40" class="mat-block">
      <mat-label translate>tb.rulenode.connect-timeout</mat-label>
      <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">
      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('required')">
        {{ 'tb.rulenode.connect-timeout-required' | translate }}
      </mat-error>
      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('min')">
        {{ 'tb.rulenode.connect-timeout-range' | translate }}
      </mat-error>
      <mat-error *ngIf="mqttConfigForm.get('connectTimeoutSec').hasError('max')">
        {{ 'tb.rulenode.connect-timeout-range' | translate }}
      </mat-error>
    </mat-form-field>
  </div>
  <mat-form-field class="mat-block">
    <mat-label translate>tb.rulenode.client-id</mat-label>
    <input matInput formControlName="clientId">
  </mat-form-field>
  <mat-checkbox formControlName="cleanSession" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.clean-session' | translate }}
  </mat-checkbox>
  <mat-checkbox formControlName="ssl" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.enable-ssl' | translate }}
  </mat-checkbox>
  <tb-credentials-config formControlName="credentials"></tb-credentials-config>
</section>
